import React, { Component } from 'react';
import { Input, Button, Checkbox, Icon, Form } from 'antd';
import { connect } from 'dva';
import { title } from '../../../config';
import tools from '../../utils';
import md5 from '../../utils/md5';
import css from './userLogin.css';

const styles = {
  formContainer: {
    width: 320,
    display: 'flex',
    justifyContent: 'center',
    flexDirection: 'column',
    padding: '30px 40px',
    background: '#fff',
    borderRadius: '6px',
    boxShadow: '1px 1px 2px #eee',
  },
  formItem: {
    position: 'relative',
    marginBottom: '25px',
    flexDirection: 'column',
  },
  formTitle: {
    margin: '0 0 20px',
    textAlign: 'center',
    color: '#3080fe',
    letterSpacing: '12px',
  },
  inputIcon: {
    position: 'absolute',
    left: '0px',
    top: '3px',
    color: '#999',
  },
  submitBtn: {
    width: '240px',
    background: '#3080fe',
    borderRadius: '28px',
  },
  checkbox: {
    marginLeft: '5px',
  },
  tips: {
    textAlign: 'center',
  },
  link: {
    color: '#999',
    textDecoration: 'none',
    fontSize: '13px',
  },
  line: {
    color: '#dcd6d6',
    margin: '0 8px',
  },
};

class page extends Component {
  componentDidMount() {
    console.clear();

    document.title = '用户登录 - ' + title;

    const userName = tools.funcGetCookie('userName');
    if (userName !== undefined && userName !== '') {
      document.getElementById('passwd').focus();

      const { form } = this.props;
      form.setFieldsValue({ userName });
    } else {
      document.getElementById('userName').focus();
    }
  }

  // 处理登录表单提交
  funcSubmit = e => {
    e.preventDefault();
    const { form, userLogin, dispatch } = this.props;
    form.validateFields((err, inp) => {
      if (err) return false;

      userLogin.loading = true;

      tools.funcSetCookie('userName', inp.userName);

      const payload = {
        userName: inp.userName,
        passwd: md5.md5(inp.passwd),
      };
      dispatch({
        type: 'userLogin/submit',
        payload,
      });
      return true;
    });
  };

  render() {
    const { props } = this;
    const { form, userLogin } = props;
    const { getFieldDecorator } = form;

    return (
      <div className={css.contentWrapper}>
        <h2 className={css.slogan}>
          欢迎使用
          <br />
          {title}管理系统
        </h2>
        <div style={styles.formContainer}>
          <h4 style={styles.formTitle}>登录</h4>
          <Form onSubmit={this.funcSubmit}>
            <Form.Item style={styles.formItem}>
              {getFieldDecorator('userName', {
                rules: [{ required: true, message: '请输入您的用户名' }],
              })(<Input placeholder="用户名" maxLength={20} prefix={<Icon type="user" />} />)}
            </Form.Item>
            <Form.Item style={styles.formItem}>
              {getFieldDecorator('passwd', {
                rules: [{ required: true, message: '请输入您的密码' }],
              })(
                <Input
                  placeholder="密码"
                  maxLength={20}
                  type="password"
                  prefix={<Icon type="lock" />}
                />
              )}
            </Form.Item>
            <Form.Item style={styles.formItem}>
              {getFieldDecorator('remember', {
                initialValue: true,
                valuePropName: 'checked',
              })(<Checkbox>记住用户名</Checkbox>)}
              <br />
              <Button
                htmlType="submit"
                type="primary"
                style={{ width: '100%' }}
                loading={userLogin.loading}
              >
                立即登录
              </Button>
            </Form.Item>
          </Form>
        </div>
      </div>
    );
  }
}

const page2 = Form.create()(page);
export default connect(({ userLogin }) => ({ userLogin }))(page2);
